<style>
/*出货订单详细*/
#tb_chqsfx_detail.detail-area{border:1px solid red;padding:15px;border-radius: 5px;}
#tb_chqsfx_detail .step{font-size:30px;font-weight:bold;float:left;margin:15px;}
#tb_chqsfx_detail .order-item{border: 1px solid #CCC;
    padding: 5px;
    line-height: 20px;
    float: left;
    border-radius: 10px;
    margin: 3px;
    text-align: center;}
#tb_chqsfx_detail .tags{width: 17px;float: left;}
</style>
<!--12天出货趋势分析图表-->
<div style="height:15px;"></div>
<div id="tb_chqsfx"></div>
<!--出货订单详细-->
<div id="tb_chqsfx_detail" class=""></div>

<script>
layui.use(['jquery', 'layer'], function() {
	var $ = layui.jquery;
	var layer = layui.layer;

	//12天出货趋势分析图表
	window.getChqsfx = function() {
		$.ajax({
			type: "POST",
			url: "?c=dailyV2&m=index",
			data: "_ajax=1&fun=_getChqsfx&factory_id="+factoryId+"&from="+from,
			dataType: "json",
			success: function(res){
				if(res.code == 1){
					var d = res.data;
	
					var chart = Highcharts.chart('tb_chqsfx', {
					    title: {
					        text: '12天出货趋势（件数）',
					        x: -20 //center
					    },
					    xAxis: {
					        categories: d.days
					    },
					    yAxis: {
					        title: {
					            text: '件数'
					        },
					        plotLines: [{
					            value: 0,
					            width: 1,
					            color: '#808080'
					        }]
					    },
					    legend: {
					        layout: 'vertical',
					        align: 'right',
					        verticalAlign: 'middle',
					        borderWidth: 0
					    },
						plotOptions: {
							line: {
								dataLabels: {
									enabled: true,         // 开启数据标签
									formatter: function() {
										return this.y
									}
								}
							},
							series: {
				                cursor: 'pointer',
				                point: {
				                    events: {
				                        // 数据点点击事件
				                        // 其中 e 变量为事件对象，this 为当前数据点对象
				                        click: function (e) {
				                            showOrders(e.point.category);
				                        }
				                    }
				                }
				            }
						},
					    series: d.stat
					});
	
				}else layer.msg(res.msg, {icon: 2,anim: 6});
			}
		});
	}
	
	// 12天出货趋势分析图表-订单列表
	var now = new Date();
	var month = now.getMonth() + 1;//得到月份
	var date = now.getDate();//得到日期
	
	window.showOrders = function(day) {
		$('#tb_chqsfx_detail').addClass('detail-area');
		$('#tb_chqsfx_detail').html('加载中，请稍后...');
		$.ajax({
			type: "POST",
			url: "?c=dailyV2&m=index",
			data: "_ajax=1&fun=_getChqsfxDetail&factory_id="+factoryId+"&day="+day+"&from="+from,
			dataType: "json",
			success: function(res){
				if(res.code == 1){
					var d = res.data;
					var caigou = d.caigou;
					var caichuang = d.caichuang;
					var chejian = d.chejian;
					var tail = d.tail;
	
					if(caigou.length > 0 || caichuang.length > 0 || chejian.length > 0 || tail.length > 0) {
						var html = '<div>'+day+'</div>';
						if (caigou.length > 0) html += '<div class="step">采购</div>';
						for(var i in caigou) {
							html += '<div class="orders">';
							html += '<div class="order-item">';
							html += caigou[i]['tag'];
							html += '<img src="'+caigou[i]['pic']+'" style="max-width:100px; max-height:80px;">';
							html += '<br>'+caigou[i]['client_ordernum'];
							html += '<br>'+caigou[i]['num']+'件';
							html += '</div>';
							html += '</div>';
						}
	
						if (caichuang.length > 0) html += '<div class="step">裁床</div>';
						for(var i in caichuang) {
							html += '<div class="orders">';
							html += '<div class="order-item">';
							html += caichuang[i]['tag'];
							html += '<img src="'+caichuang[i]['pic']+'" style="max-width:100px; max-height:80px;">';
							html += '<br>'+caichuang[i]['client_ordernum'];
							html += '<br>'+caichuang[i]['num']+'件';
							html += '</div>';
							html += '</div>';
						}
	
						if (chejian.length > 0) html += '<div class="step">车间</div>';
						for(var i in chejian) {
							html += '<div class="orders">';
							html += '<div class="order-item">';
							html += chejian[i]['tag'];
							html += '<img src="'+chejian[i]['pic']+'" style="max-width:100px; max-height:80px;">';
							html += '<br>'+chejian[i]['client_ordernum'];
							html += '<br>'+chejian[i]['num']+'件';
							html += '</div>';
							html += '</div>';
						}
	
						if (tail.length > 0) html += '<div class="step">尾部</div>';
						for(var i in tail) {
							html += '<div class="orders">';
							html += '<div class="order-item">';
							html += tail[i]['tag'];
							html += '<img src="'+tail[i]['pic']+'" style="max-width:100px; max-height:80px;">';
							html += '<br>'+tail[i]['client_ordernum'];
							html += '<br>'+tail[i]['num']+'件';
							html += '</div>';
							html += '</div>';
						}
						html += '<div style="clear:both;"></div>';
					} else html = '暂无订单数据';
	
					$('#tb_chqsfx_detail').html(html);
				}else layer.msg(res.msg, {icon: 2,anim: 6});
			}
		})
	}
	showOrders(month+'月'+date+'日');
	
	setTimeout("getChqsfx()", 500);	// 12天出货趋势分析图表
	setInterval("getChqsfx()", 3600000); 	// 60分钟
});
</script>